05. Hide Some Columns

Hiding Table Columns

A simple table has the following HTML:

<table class="scores_table">
  <thead>
    <tr>
      <th>date</th>
      <th class="gametime">game time</th>
      <th>team</th>
      <th colspan="2">score</th>
      <th>team</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Friday</td>
      <td class="gametime">7:05pm</td>
      <td>Dodgers</td>
      <td>2</td>
      <td class="winner">3</td>
      <td class="winner">Giants</td>
    </tr>
  </tbody>
</table>

Sometimes, the best way to deal with a table column on mobile to simply just get rid of it! So along those lines, how would you fill out the below media query so that the gametime class is hidden when the viewports are 499 pixels wide (or smaller)?

QUIZ QUESTION::

Here's the media query:

@media screen and ___A___ {
  .gametime {
    ___B___
  }
}

Again, to hide the gametime class for viewports of 499px wide or smaller, what should go into the blank spaces labeled A and B?

ANSWER CHOICES: